.major-search,
.major-search-result {
  max-width: 520px;
}
.major-search-result {
  display: none;
}

.major-item {
  .thumb {
    width: 130px;
    height: 130px;
  }
  .text-bg-info-subtle {
    background: #99ccff !important;
  }
  .desc {
    height: 0;
    transition: all 0.5s ease-in-out;
  }
}

.btn-category {
  text-align: center;
  position: fixed;
  font-size: 16px;
  color: $primary;
  padding: 0;
  width: 45px;
  height: 45px;
  line-height: 45px;
  background: #ffffffed;
  box-shadow: 0 2px 7px #0000001f;
  border-radius: 9px;
  bottom: 120px;
  right: 20px;
  z-index: 1010;
}

.major {
  h2.invisible {
    height: 0;
  }
  .slider-major {
    .swiper-pagination {
      bottom: 0 !important;
      &-bullet-active {
        width: calc(var(--nvm-novem-slider-dots-size) * 2);
        border-radius: var(--nvm-novem-slider-dots-size);
      }
    }
  }

  .fearture {
    background: $primary url("/assets/images/page/major/shape-m.png") right
      bottom no-repeat;
    background-size: contain;
  }
  .sidebar {
    z-index: 1045;
  }
  .phototeacher {
    width: 160px;
    // height: 160px;
  }
  .photostudent {
    width: 160px;
    // height: 160px;
  }
}

@include media-breakpoint-up(md) {
  .major {
    .post {
      width: 100%;
    }
    .phototeacher {
      width: 122px;
      //   height: 152px;
    }
    .photostudent {
      width: 122px;
    }
  }
}
@include media-breakpoint-up(lg) {
  .major {
    .post {
      width: 720px;
      position: relative;
      .fearture {
        position: relative;
        z-index: 1;
      }
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 152px;
        width: 100%;
        background: $primary;
        border-top-left-radius: var(--#{$prefix}border-radius) !important;
        border-top-right-radius: var(--#{$prefix}border-radius) !important;
        z-index: 0;
      }
    }
    .sidebar {
      z-index: 298;
      .offcanvas-lg {
        //   border: 2px solid $primary;
        .offcanvas-header {
          background: $primary url("/assets/images/page/major/shape-1.png") top
            left;
          h2 {
            color: $white;
          }
          .btn-close {
            display: none;
          }
        }
        .offcanvas-body {
          border: 3px solid $primary;
          background: $white !important;
          .toc-list {
            padding: 0 12px;
          }
          .toc-list-item {
            padding: 6px 0 6px 16px;
            width: 100%;
            border-bottom: 1px solid $gray-100;
            position: relative;
            .toc-link {
              &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -5px;
                width: 8px;
                height: 8px;
                border-top: 1px solid;
                border-right: 1px solid;
                transform: rotate(45deg);
                border-color: #888;
                background: transparent;
              }
            }
            &.is-active-li {
              .toc-link {
                color: $warning;
                &::before {
                  border-width: 3px;
                  border-color: $warning;
                }
              }
            }
          }
        }
      }
    }
  }
  .btn-category {
    display: none;
  }
}
@include media-breakpoint-up(xl) {
  .major-item {
    .thumb {
      width: 210px;
      height: 210px;
    }
    &:hover {
      .desc {
        padding-top: 0.5em;
        height: 5em;
      }
    }
  }
}
